<template>
    <div class="login">
        <div class="bg">
            <div class="sysTitle">
                我要学Java
                <br>
                后台管理系统
            </div>

            <div class="box">
                <div class="top">
                    账号登录
                </div>

                <div class="center">
                    <!--账号-->
                    <div class="account">
                        <Input
                                type="text"
                                v-model="account"
                                placeholder="请输入手机号"
                                size="large"
                                clearable
                                prefix="ios-contact-outline"/>
                        <div class="tip" v-if="accountIsNullFlag">登录账号不能为空</div>
                        <div class="tip" v-if="iphoneRegFlag">手机号格式错误</div>
                    </div>

                    <!--密码-->
                    <div class="pwd">
                        <Input
                                type="password"
                                v-model="password"
                                placeholder="请输入密码"
                                size="large"
                                clearable
                                password
                                prefix="ios-lock-outline"
                                @on-enter="login"/>
                        <div class="tip" v-if="passwordIsNullFlag">登录密码不能为空</div>
                    </div>
                </div>

                <div class="bottom">
                    <Button
                            type="success"
                            size="large"
                            html-type="button"
                            style="width: 100%"
                            @click="login">
                        登录
                    </Button>
                </div>
            </div>
        </div>

        <div>
            <a href="http://www.beian.miit.gov.cn" target="_blank" style="font-size: 8px">备案号：苏ICP备18041692号</a>
        </div>
    </div>
</template>

<script>
    import {checkIsNull} from "@/tools/Null";
    import {checkIphoneNo} from "@/tools/Reg";
    import * as Base64 from "js-base64";
    import {setCookie} from "@/tools/cookie";

    export default {
        name: "",
        components: {},
        data() {
            return {
                //账号
                account: "",
                //密码
                password: "",
                //账号密码是否为空
                accountIsNullFlag: false,
                passwordIsNullFlag: false,
                //手机号格式
                iphoneRegFlag: false,
            }
        },
        methods: {
            loginCheck: function () {
                //校验账号
                let b1 = checkIsNull(this.account);
                if (b1) {
                    this.accountIsNullFlag = true
                    this.iphoneRegFlag = false
                } else {
                    this.accountIsNullFlag = false
                    let b3 = checkIphoneNo(this.account);
                    b3 ? this.iphoneRegFlag = false : this.iphoneRegFlag = true
                }
                //校验密码
                let b2 = checkIsNull(this.password);
                b2 ? this.passwordIsNullFlag = true : this.passwordIsNullFlag = false
            },
            //点击登录
            login: function () {
                this.loginCheck();
                //请求
                let data = {
                    iphoneNo: this.account,
                    po: Base64.encode(this.password),
                    pc: this.Md5(this.password)
                }

                this.axios.post(`/login/adminLogin/user`, data)
                    .then((data) => {
                        if (data.code == 20010) {
                            this.$Message.error({
                                background: true,
                                closable: true,
                                content: '用户名或密码错误'
                            });
                            return
                        }
                        if (data.code == 20002) {
                            this.$Message.error({
                                background: true,
                                closable: true,
                                content: '该账号未注册'
                            });
                            return
                        }
                        let token = data.data.token;
                        let sysUser = data.data.sysUser;
                        let userId = sysUser.userId;
                        //将后台的数据前端本地化，后台修改字段，前台只要修改这里即可
                        let user = {
                            userId: userId,
                            userName: sysUser.userName,
                            iphoneNo: sysUser.iphoneNo,
                            sysRoles: sysUser.sysRoles,
                            headUrl: sysUser.headUrl
                        }
                        //将用户对象信息 字符串化
                        let userInfo = JSON.stringify(user);
                        //存到本地
                        window.sessionStorage.setItem("isLogin", true);
                        window.sessionStorage.setItem("token", token);
                        window.sessionStorage.setItem("userInfo", userInfo);

                        //存到 cookie
                        setCookie("isLogin", true);
                        setCookie("token", token);
                        setCookie("userInfo", userInfo);

                        //存到Vuex
                        this.$store.dispatch("updateId", userId);
                        this.$store.dispatch("updateIsLogin", true);
                        this.$store.dispatch("updateToken", token);
                        this.$store.dispatch("updateUserInfo", user);

                        //登录成功
                        this.Bus.$emit("my-event-app-login", true);
                    })
                    .catch((data) => {
                    })
            },
        },
        mounted() {
        }
    }
</script>

<style scoped>
    /*背景图片*/
    .login .bg {
        width: 100%;
        height: 100vh;
        background-image: url("../../assets/login/loginbg.jpg");
        background-size: 100%;
        background-repeat: no-repeat;
        /*相对自身定位*/
        position: relative;
    }

    /*系统名称*/
    .login .bg .sysTitle {
        font-size: 40px;
        color: #8ce6b0;
        border-radius: 4px;

        /*相对父盒子定位*/
        position: absolute;
        top: calc(25%);
        left: calc(10%);
    }

    /*登录盒子*/
    .login .bg .box {
        width: 320px;
        /*border: 1px solid black;*/
        background-color: #F0F0F0;
        border-radius: 4px;

        /*相对父盒子定位*/
        position: absolute;
        top: calc(25%);
        right: calc(14%);
        padding: 10px 10px 20px;
    }

    /*账号登录*/
    .login .bg .box .top {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        text-align: center;
        color: #ff0000;
        border-bottom: 2px solid #ff0000;
    }

    .login .box .center .tip {
        color: red;
        font-size: 12px;
        margin: 2px 0px 1px 6px;
    }

    /*账号*/
    .login .box .center .account {
        margin-top: 20px;
    }

    /*密码*/
    .login .box .center .pwd {
        margin-top: 20px;
    }

    /*登录按钮*/
    .login .box .bottom {
        margin-top: 20px;
    }
</style>